<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <todo-add  @add="todeadd" ></todo-add>

    <!-- 列表区域 -->
   <todo-body :list="list" @del="tododel"></todo-body>
    
    <!-- 统计和清空 -->
   <todo-delete :list="list" @clear="list = []"></todo-delete>
  </section>
</template>

<script>
import todoAdd from './components/todoAdd.vue'
import todoBody from './components/todoBody.vue'
import todoDelete from './components/todoDelete.vue'
export default {
  components: {
    todoAdd,
    todoBody,
    todoDelete
  },
    data() {
      return {
         list: JSON.parse(localStorage.getItem('fh')) ||[
          { id: 1, name: '吃饭' },
          { id: 2, name: '自习' },
          { id: 3, name: '睡觉' }
        ]
      }
    },
    watch:{
      list: {
        handler (val) {
          localStorage.setItem('fh' , JSON.stringify(val))
        },
        deep: true
      }
    },
    methods: { 
      tododel(id) {
        console.log(id)
        this.list = this.list.filter(item => item.id !==id)
       },
       todeadd(todoname) {
        this.list.unshift(
          {
            id: Date.now(),
            name: todoname
          }
        )
       }
    }
  }


</script>

<style>

</style>
